<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout(~{::title}, ~{::section})}">
<head>
    <title th:text="${topic != null ? topic.topicName : 'Topic Detail'} + ' - SnackMQ Console'">Topic Detail - SnackMQ Console</title>
</head>
<body>
<section>
    <div th:if="${topic}">
        <h4 class="mb-3" th:text="${'Topic: ' + topic.topicName}">Topic: <span th:text="${topic.topicName}"></span></h4>
        <p>
            <a href="/topics" class="btn btn-secondary btn-sm" th:text="#{topic.back.to.list}">Back to Topic List</a>
        </p>
        <div class="table-responsive">
            <table class="table table-bordered shadow-sm border-0 rounded">
                <thead class="table-light">
                <tr>
                    <th th:text="#{topic.partition.id}">Partition ID</th>
                    <th th:text="#{topic.leader}">Leader</th>
                    <th th:text="#{topic.replicas}">Replicas</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="entry : ${topic.partitionAssignments}">
                    <td th:text="${entry.key}">0</td>
                    <td>
                        <span th:text="${entry.value.leader.host + ':' + entry.value.leader.port}" class="badge bg-primary">localhost:9876</span>
                    </td>
                    <td>
                        <th:block th:each="replica, iterStat : ${entry.value.replicas}">
                            <span th:text="${replica.host + ':' + replica.port}"
                                  th:classappend="${replica.equals(entry.value.leader) ? 'fw-bold' : ''}">localhost:9876</span>
                            <span th:if="!${iterStat.last}">, </span>
                        </th:block>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div th:if="${error}" class="alert alert-danger" role="alert" th:text="#{topic.error.loading}">
        Error loading data.
    </div>
</section>
<th:block th:replace="~{fragments/js/topic-detail-js}"></th:block>
</body>
</html>